<template>
  <div id="app-ckeditor">
    <ckeditor v-model="editorData2" :editor="editor" :config="editorConfig" />
    <!--    <ckeditor v-model="editorData2" :config="editorConfig" />-->
  </div>
</template>
<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import { MyCustomUploadAdapterPlugin } from '@/components/richText/customUploadAdapter'
export default {
  name: 'CkEditors',
  model: {
    prop: 'content',
    event: 'change'
  },
  props: ['modelValue', 'content'],
  emits: ['update:modelValue'],
  data() {
    return {
      editor: ClassicEditor,
      editorConfig: {
        extraPlugins: [MyCustomUploadAdapterPlugin],
        image: {
          styles: [
            'full', 'alignLeft', 'alignCenter', 'alignRight'
          ],
          resizeOptions: [
            {
              name: 'resizeImage:原尺寸',
              label: '原尺寸',
              value: null
            },
            {
              name: 'resizeImage:25',
              label: '25%',
              value: '25'
            },
            {
              name: 'resizeImage:50',
              label: '50%',
              value: '50'
            },
            {
              name: 'resizeImage:75',
              label: '75%',
              value: '75'
            }
          ],
          toolbar: [
            // 'imageStyle:full',
            // 'imageStyle:side',
            'imageStyle:alignLeft',
            'imageStyle:alignCenter',
            'imageStyle:alignRight',
            '|',
            'resizeImage',
            '|',
            'toggleImageCaption',
            'imageTextAlternative',
            'linkImage'
          ]
        }

      }
      // editorUrl: "https://xxx/ckeditor/ckeditor.js",
      // editorConfig: {
      //   language: 'zh-cn',
      //   extraPlugins: ['colorbutton','MyCustomUploadAdapterPlugin']
      // }
    }
  },
  computed: {
    editorData: {
      get() {
        return this.modelValue
      },
      set(value) {
        console.log(value)
        this.$emit('update:modelValue', value)
      }
    },
    editorData2: {
      get() {
        return this.content
      },
      set(value) {
        this.$emit('change', value)
      }
    }
  },
  watch: {
    // editorData(val1) {
    //   console.log(val1)
    // }
  },
  methods: {
  }
}
</script>
<style>
.ck-editor__main{
  max-height: 350px;
  overflow: scroll;
}
</style>
